<div class="change">
  <div class="change-container">
    <header>
      <div class="time">
        <span>
          年：
          <select class="year" [ngModel]="currentYear" (ngModelChange)="onChangeYear($event)">
              <option [value]="year" *ngFor="let year of years" > {{year}} </option>               
          </select>
        </span>
        <span>
          <button class="button-trend" (click)="onSearch()">确定</button>
        </span>
      </div>
      <div class="title" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave($event)">
        {{currentDevice?.farmName}}{{currentDevice?.deviceName}}
        <span></span>
        <div class="turbine-selector-show" [hidden]="!showSelector">
         
          <app-device-selector 
            class="detail-select"          
            [multipleDevice]="false" 
            [display]="true"  
            [farmCategory]="farmCategory" 
            [deviceCategories]="deviceCategory" 
            (selectedDevicesChange)="onSelectFarmRadio($event)">
          </app-device-selector> 
        </div>
      </div>

    </header>

    <div class="main">
      <section>
        <div class="echarts">
          <div class="line-echarts">
            <app-compare-echarts [maxPower]="maxPower" [series]="monthPowerSeries" [legend]="monthPowerLegend"></app-compare-echarts>
          </div>
        </div>
        <div class="line-point">
          <div class="bottom">
            <div class="bottom-box">
              <!-- <p *ngFor="let high of compareDataHigh">月功率曲线偏高！</p>
              <p *ngFor="let low of compareDataLow">{{low?.date}}月功率曲线偏低！</p> -->
              <p *ngIf="high"><span>功率曲线偏高的月份是：</span> <span *ngFor="let high of compareDataHigh">{{high?.date}}月、</span></p>
              <p *ngIf="low"><span>功率曲线偏低的月份是：</span> <span *ngFor="let low of compareDataLow">{{low?.date}}月、</span></p>              
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>